<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Fancytree - Example: Table</title>

    <style type="text/css">
        table.fancytree-ext-table tbody tr:nth-child(even) {
            background-color: #f4f4f8;
        }
        td.alignCenter {
            text-align: center;
        }
        .highlight {
        }
        .highlight > .fancytree-node >.fancytree-title{
            color: red;
        }

    </style>

    <link rel="stylesheet" href="{{ static_url('mar10-fancytree/src/skin-win8/ui.fancytree.css') }}">
    <link rel="stylesheet" href="{{ static_url('jquery-ui-1.12.1/jquery-ui.css') }}">
    <link rel="stylesheet" href="{{ static_url('mar10-fancytree/lib/prettify.css') }}">
    <link rel="stylesheet" href="{{ static_url('mar10-fancytree/demo/sample.css') }}">
    <link rel="stylesheet" href="{{ static_url('jquery/jquery.contextMenu.css') }}">

    <script type="text/javascript" src="{{ static_url('jquery/jquery-3.2.1.min.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('jquery-ui-1.12.1/jquery-ui.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('mar10-fancytree/src/jquery.fancytree.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('mar10-fancytree/src/jquery.fancytree.table.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('mar10-fancytree/src/jquery.fancytree.edit.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('mar10-fancytree/src/jquery.fancytree.filter.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('jquery/jquery.contextMenu.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('mar10-fancytree/lib/prettify.js') }}"></script>
    <script type="text/javascript" src="{{ static_url('mar10-fancytree/demo/sample.js') }}"></script>

</head>
<script type="text/javascript">
    window.edit_desc = false;
    $(function () {
        $("#treetable").fancytree({
            extensions: ["table", "edit", "filter"],
            checkbox: true,
            selectMode: 3,
//          autoCollapse: true,
            quicksearch: true,
            table: {
                indentation: 20,      // indent 20px per node level
                nodeColumnIdx: 1     // render the node title into the 2nd column
//              checkboxColumnIdx: 0  // render the checkboxes into the 1st column
            },
            source: {
                url: "/report/show?key={{ report_id }}&type=master"
            },
            renderColumns: function (event, data) {
                var node = data.node,
                    $tdList = $(node.tr).find(">td");
                $tdList.eq(0).text(node.getIndexHier()).addClass("alignLeft");
                if (node.data.hasOwnProperty("auth")){
                    $tdList.eq(3).text(node.data.auth).addClass("alignCenter");
                }
                $tdList.eq(3).addClass("has-menu");
                if (node.data.hasOwnProperty("commit_date")){
                    $tdList.eq(4).text(node.data.commit_date).addClass("alignLeft")
                }
                if (node.data.hasOwnProperty("full_path")){
                    $tdList.eq(1).attr("title", node.data.full_path);
                }
                if (node.data.hasOwnProperty("msg")){
                    $tdList.eq(3).attr("title", node.data.msg);
                }
                if (node.data.value === 1) {
                    $tdList.eq(2).html("<div style='color:red'>&#10037</div>").addClass("alignCenter");
                } else {
                    $tdList.eq(2).html();
                }

                $tdList.eq(5).html("<input type='radio' name='pass" + node.key + "' value='yes'>").addClass("alignCenter");
                $tdList.eq(6).html("<input type='radio' name='pass" + node.key + "' value='no'>").addClass("alignCenter");
            },
            edit: {
                triggerStart: ["f2", "shift+click", "mac+enter"],
                beforeEdit: function (event, data) {
                    if (!window.edit_desc){
                        return false;
                    }

                    var pattern = new RegExp(".*\\((.*)\\)$");
                    data.prevTitle = data.node.title;
                    var r = data.node.title.match(pattern);
                    if (r !== null){
                        data.node.title = r[1];
                        return true;
                    }
                    data.node.title = "";
                    return true;
                },
                edit: function (event, data) {
                    data.node.title = data.prevTitle;
                },
                beforeClose: function (event, data) {
                    if (data.dirty) {
                        if (is_str_unsafe(data.value)) {
                            alert("注释包含非法字符！请重新输入。");
                            return false;
                        }
                        if ($("#auto_save").is(":checked") || confirm("是否保存？")) {
                            var desc = "";
                            data.desc = data.value;
                            if (data.value !== "") {
                                desc = "(" + data.value + ")";
                            }
                            var pattern = new RegExp("^(.*?)(\\(.*\\))?$");
                            var r = data.node.title.match(pattern);
                            if (r !== null) {
                                data.value = r[1] + desc;
                            }
                            return true;
                        }
                    }
                    data.value = data.node.title;
                },
                save: function (event, data) {
                    var node = data.node;
                    var tree_path = node.title;
                    while (node.parent.title !== "root"){
                        tree_path = node.parent.title + "$" + tree_path;
                        node = node.parent;
                    }
                    var ret = false;

                    $.ajax({
                        type: "POST",
                        url: "/config/desc",
                        dataType: "json",
                        timeout : 1000,
                        data: {"tree_path": tree_path, "new_desc": data.desc},
                        async: false,
                        success: function (result) {  //function1()
                            if (result.success){
                                ret = true;
                            }else{
                                console.log(result.msg);
                            }
                        },
                        failure: function (result) {
                            alert("网络异常！");
                        }
                    });
                    //TODO 返回false时，会重复提示是否保存
                    return ret;
                },
                close: function (event, data) {
                }
            },
            filter: {
                autoApply: true,   // Re-apply last filter if lazy data is loaded
                autoExpand: false, // Expand all branches that contain matches while filtered
                counter: true,     // Show a badge with number of matching child nodes near parent icons
                fuzzy: true,      // Match single characters in order, e.g. 'fb' will match 'FooBar'
                hideExpandedCounter: false,  // Hide counter badge if parent is expanded
                hideExpanders: true,       // Hide expanders if all child nodes are hidden by filter
                highlight: true,   // Highlight matches by wrapping inside <mark> tags
                leavesOnly: false, // Match end nodes only
                nodata: true,      // Display a 'no data' status node if result is empty
                mode: "dimm"       // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
            }
        });

        $("#treetable_auto").fancytree({
            extensions: ["table", "filter"],
            checkbox: true,
            selectMode: 3,
            quicksearch: true,
            table: {
                indentation: 20,      // indent 20px per node level
                nodeColumnIdx: 1     // render the node title into the 2nd column
//              checkboxColumnIdx: 0  // render the checkboxes into the 1st column
            },
            source: {
                url: "/report/show?key={{ report_id }}&type=auto_gen"
            },
            renderColumns: function (event, data) {
                var node = data.node,
                    $tdList = $(node.tr).find(">td");
                $tdList.eq(0).text(node.getIndexHier()).addClass("alignLeft");
                if (node.data.hasOwnProperty("pass") && !node.data.pass) {
                    $tdList.eq(2).html("<div style='color:red'>&#10037</div>").addClass("alignCenter");
                } else {
                    $tdList.eq(2).html();
                }
                if (node.data.hasOwnProperty("gen") && !node.data.gen) {
                    $tdList.eq(1).addClass("highlight");
                }
                if (node.data.hasOwnProperty("full_path")){
                    $tdList.eq(1).attr("title", node.data.full_path);
                }
                if (node.data.hasOwnProperty("auth")){
                    $tdList.eq(3).text(node.data.auth).addClass("alignCenter");
                }
                $tdList.eq(3).addClass("has-menu");
                if (node.data.hasOwnProperty("commit_date")){
                    $tdList.eq(4).text(node.data.commit_date).addClass("alignLeft")
                }
                if (node.data.hasOwnProperty("msg")){
                    $tdList.eq(3).attr("title", node.data.msg);
                }
            },
            filter: {
                autoApply: true,   // Re-apply last filter if lazy data is loaded
                autoExpand: false, // Expand all branches that contain matches while filtered
                counter: true,     // Show a badge with number of matching child nodes near parent icons
                fuzzy: true,      // Match single characters in order, e.g. 'fb' will match 'FooBar'
                hideExpandedCounter: false,  // Hide counter badge if parent is expanded
                hideExpanders: true,       // Hide expanders if all child nodes are hidden by filter
                highlight: true,   // Highlight matches by wrapping inside <mark> tags
                leavesOnly: false, // Match end nodes only
                nodata: true,      // Display a 'no data' status node if result is empty
                mode: "dimm"       // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
            }
        });

        $("#treetable").delegate("input[name=passed]", "click", function (e) {
//                var node = $.ui.fancytree.getNode(e),
//                    $input = $(e.target);
//                e.stopPropagation();  // prevent fancytree activate for this row
//                if ($input.is(":checked")) {
////				alert("like " + $input.val());
//                } else {
////				alert("dislike " + $input.val());
//                }
        });

        var tree = $("#treetable").fancytree("getTree");
        $("input[name=search]").keyup(function (e) {
            var n,
                filterFunc = tree.filterNodes,
                match = $(this).val();

            if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
                $("button#btnResetSearch").click();
                return;
            }
            if ($("#regex").is(":checked")) {
                // Pass function to perform match
                n = filterFunc.call(tree, function (node) {
                    return new RegExp(match, "i").test(node.title);
                });
            } else {
                // Pass a string to perform case insensitive matching
                n = filterFunc.call(tree, match);
            }
            $("button#btnResetSearch").attr("disabled", false);
            $("span#matches").text("(" + n + " matches)");
        }).focus();

        $("button#btnResetSearch").click(function (e) {
            $("input[name=search]").val("");
            $("span#matches").text("");
            tree.clearFilter();
        }).attr("disabled", true);

        var tree_auto = $("#treetable_auto").fancytree("getTree");
        $("input[name=search_auto]").keyup(function (e) {
            var n,
                filterFunc = tree_auto.filterNodes,
                match = $(this).val();

            if (e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === "") {
                $("button#btnResetSearch_auto").click();
                return;
            }
            if ($("#regex").is(":checked")) {
                // Pass function to perform match
                n = filterFunc.call(tree_auto, function (node) {
                    return new RegExp(match, "i").test(node.title);
                });
            } else {
                // Pass a string to perform case insensitive matching
                n = filterFunc.call(tree_auto, match);
            }
            $("button#btnResetSearch_auto").attr("disabled", false);
            $("span#matches_auto").text("(" + n + " matches)");
        }).focus();

        $("button#btnResetSearch_auto").click(function (e) {
            $("input[name=search_auto]").val("");
            $("span#matches_auto").text("");
            tree.clearFilter();
        }).attr("disabled", true);

    });

    function do_edit() {
        if (window.edit_desc){
            window.edit_desc = false;
            $("#edit_control")[0].innerHTML = "开始编辑";
            $("#edit_control")[0].backgroundColor = "red";
        }else{
            window.edit_desc = true;
            $("#edit_control")[0].innerHTML = "<div style='color: red'>结束编辑</div>";
        }
    }
    function is_str_unsafe(str){
        var unsafe_str = "'~`·!@#$%^&*()-+./\"";
        for (i = 0; i < unsafe_str.length; i++){
            var char = unsafe_str.charAt(i);
            var position = str.indexOf(char);
            if (position != -1){
                return true
            }
        }
        return false
    }
</script>

<body class="example">
<h1>Art资源对比结果</h1><font style="color:red">(审查功能尚未完成)</font>
<div class="description">
    <p>
        Art 资源更新统计分类信息。
        <!--，测试通过请勾选“通过”，有问题请勾选“不过”-->
    </p>
    <p>
        <b>生成时间：</b> {{ report["date"] }} <br>
        <b>CommitId1：</b>{{ report["section1"] }} &nbsp;&nbsp;&nbsp;&nbsp; <b>提交信息：</b> {{ report["section1_info"] }} <br>
        <b>CommitId2：</b>{{ report["section2"] }} &nbsp;&nbsp;&nbsp;&nbsp; <b>提交信息：</b> {{ report["section2_info"] }} <br>
        <input type="hidden" id="master_branch" value="{{ report['section1_branch'] }}">
    </p>
</div>

<div style="display:none">
    <label for="skinswitcher">Skin:</label> <select id="skinswitcher"></select>
</div>
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">文件修改</a></li>
        <li><a href="#tabs-2">自动生成文件检查</a></li>
        <li><a href="#tabs-3">未描述文件列表</a></li>
    </ul>
    <div id="tabs-1">
        <div id="controlgroup">
            <label for="auto_save">自动保存</label>
            <input type="checkbox" id="auto_save">
            <button id="edit_control" class="ui-button" onclick="do_edit()">开始编辑</button>
        </div>
        <label>Filter:</label>
        <input name="search" placeholder="Filter..." autocomplete="off">
        <button id="btnResetSearch">&times;</button>
        <span id="matches"></span>
        <table id="treetable" style="background-color: #d8e8e8">
            <colgroup>
                <!--<col width="30px"></col>-->
                <col width="30px"></col>
                <col width="50%"></col>
                <col width="80px"></col>
                <col width="150px"></col>
                <col width="*"></col>
                <col width="150px"></col>
                <col width="150px"></col>
            </colgroup>
            <thead>
            <tr>
                <th></th>
                <th></th>
                <th>修改</th>
                <th>最后提交人</th>
                <th>最后提交日期</th>
                <th>审查(通过)</th>
                <th>审查(未通过)</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="description">
            <p>
                <b>使用说明：</b>
            </p>
            <p>
                点击“开始编辑”，然后选中要编辑的节点，按 <b>F2 或 shift+左键</b> 进入编辑模式，如果勾选了自动保存，编辑完后，点击页面其他地方或者回车，会自动保存修改后的内容。 <br>
                鼠标放到文件名上，会提示文件完整路径。<br>
                鼠标放到“最后提交人”上，会提示最后一次的git提交说明信息。<br>
                右键单击“最后提交人”，选择“查看最近5次提交”可查看当前文件的最近5次提交记录。<br>
            </p>
        </div>
    </div>
    <div id="tabs-2">
        <label>Filter:</label>
        <input name="search_auto" placeholder="Filter..." autocomplete="off">
        <button id="btnResetSearch_auto">&times;</button>
        <span id="matches_auto"></span>
        <table id="treetable_auto" style="background-color: #d8e8e8">
            <colgroup>
                <!--<col width="30px"></col>-->
                <col width="30px"></col>
                <col width="50%"></col>
                <col width="80px"></col>
                <col width="150px"></col>
                <col width="*"></col>
            </colgroup>
            <thead>
            <tr>
                <th></th>
                <th></th>
                <th>完整生成</th>
                <th>最后提交人</th>
                <th>最后提交日期</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div class="description">
            <p>
                <b>使用说明：</b>
            </p>
            <p>
                “完整生成”列带红色标记的说明此文件没有生成对应战斗内资源，或生成的资源不完整，下级列表中红色字体的文件为缺失的文件。<br>
                鼠标放到“最后提交人”上，会提示最后一次的git提交说明信息。<br>
                右键单击“最后提交人”，选择“查看最近5次提交”可查看当前文件的最近5次提交记录。<br>
            </p>
        </div>
    </div>
    <div id="tabs-3">
        <div style="padding-right: 17px; width: 100%">
            <table style="width: 100%">
                <colgroup>
                    <col style="width: 100px"/>
                    <col style="width: 65%"/>
                    <col style="width: 15%"/>
                    <col style="width: 15%"/>
                </colgroup>
                <thead>
                <tr>
                    <th>序号</th>
                    <th>文件</th>
                    <th>修改人</th>
                    <th>提交日期</th>
                </tr>
                </thead>
            </table>
        </div>
        <div style="width: 100%; height: 600px; overflow-y: scroll">
            <table style="width: 100%;">
                <colgroup>
                    <col style="width: 100px"/>
                    <col style="width: 65%"/>
                    <col style="width: 15%"/>
                    <col style="width: 15%"/>
                </colgroup>
                <tbody>
                {% if len(report["no_matched"]) > 0 %}
                {% for file in report["no_matched"] %}
                <tr>
                    <td style="text-align: center;" title="">{{ report["no_matched"].index(file) + 1 }}</td>
                    <td title="{{ file['file'] }}">{{ file['file'] }}</td>
                    <td title="{{ file['msg'] }}">{{ file['author'] }}</td>
                    <td title="{{ file['date'] }}">{{ file['date'] }}</td>
                </tr>
                {% end %}
                {% end %}
                </tbody>
            </table>
        </div>
    </div>
</div>
<div id="dialog" title="最近5次提交记录" style="width:100px;">
    <div id="commit_msg"></div>
</div>

<script>
    $("#tabs").tabs();
    $( "#controlgroup" ).controlgroup();
    $.contextMenu({
        selector: '.has-menu',
        items: {
            "tobe_cmid1": {
                name: "查看最近5次提交记录", icon: "",
                callback: function (itemKey, opt, rootMenu, originalEvent) {
                    var path = opt.$trigger[0].parentNode.children[1].title;
                    var date = opt.$trigger[0].parentNode.children[4].innerText;
                    var branch = $("#master_branch").val();
                    $.getJSON("/commits", {"path": path, "date": date, "branch": branch}, function (res) {
                        $("#dialog")[0].innerText = res["msg"];
                        $("#dialog").dialog({
                            minWidth: 600
                        });
                    });
                }
            }
        }
    });
</script>
</body>
<script>

</script>
</html>
